<template>
  <div class="container">
    <div v-if="isShowTitle" style="position: relative">
      <topTitle
        v-if="!isYiLingUser()"
        :titleText="titleText"
        :back="back"
        @gobackTriser="goBack"
      ></topTitle>
      <!-- <div class="fr ylBtn" v-else>
                <el-button type="primary" @click="getApiInfo" class="commonBut saveBtn" :loading="updateLoading">同步接口数据</el-button>
                <el-tooltip content="获取最新数据信息" placement="top" effect="dark">
                    <i class="icon iconfont iconhuabanfuben"></i>
                </el-tooltip>
            </div> -->
      <button
        type="button"
        :class="
          isYiLingUser()
            ? 'fr editBut yleditBut commonBut saveBtn funComBut'
            : 'fr editBut commonBut saveBtn funComBut'
        "
        @click="goEdit"
        v-hasBtn="[
          'companyMaintain:update',
          'companyInfo:update',
          'mNcCompayList:update',
        ]"
      >
        <i class="icon iconfont iconbianji"></i> 编辑
      </button>
    </div>
    <!-- <div :class="[companyId ? 'detailT' :'curT',companyId ? '':'mainCon']"> -->
    <div class="mainCon">
      <div :class="isYiLingUser() ? 'curT ylcurT' : 'curT'">
        <el-row v-if="isShowLogo && !isYiLingUser()" class="logoStyle">
          <el-col :span="20">
            <img
              src="../../../static/img/qyInfo.png"
              alt=""
              class="enterpriseLogo fl"
            />
            <div class="fl titleInfoBox">
              <p class="enterpriseName">{{ enterpriseData.name || '--' }}</p>
              <!-- <p><span class = "titleInfo">{{enterpriseData.enterpriseScale || '--'}}</span><span class = "titleInfo">{{enterpriseData.enterpriseBelongs|| '--'}}</span></p> -->
            </div>
          </el-col>
        </el-row>
        <div class="info">
          <el-row :gutter="20" class="pL">
            <el-col :span="12" class="leftShow">
              <span class="labelWidth">社会统一信用代码：</span>
              <span class="information">{{ enterpriseData.uscc || '--' }}</span>
            </el-col>
            <el-col :span="12" class="leftShow">
              <span class="labelWidth">所属行业：</span>
              <span class="information">{{
                enterpriseData.fullIndustryName || '--'
              }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="pL">
            <el-col :span="12" class="leftShow">
              <span class="labelWidth">注册登记地区/归属：</span>
              <div class="information">
                <span>{{ enterpriseData.regAreaName || '--' }}</span
                >，
                <span>{{ enterpriseData.enterpriseBelongs || '--' }}</span>
              </div>
            </el-col>
            <el-col :span="12" class="leftShow">
              <span class="labelWidth">经营地区：</span>
              <span class="information">{{
                enterpriseData.bizAreaName || '--'
              }}</span>
            </el-col>
          </el-row>
          <el-row
            :gutter="20"
            class="pL"
            v-show="enterpriseData.departmentType == '0'"
          >
            <el-col :span="12" class="leftShow">
              <span class="labelWidth">法人姓名/联系方式：</span>
              <div class="information">
                <span>{{ enterpriseData.boss || '--' }}</span
                >，
                <span>{{ enterpriseData.bossTel || '--' }}</span>
              </div>
            </el-col>
            <el-col :span="12" class="leftShow">
              <span class="labelWidth">法人身份证号：</span>
              <span class="information">{{
                enterpriseData.bossIdcard || '--'
              }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="pL">
            <el-col :span="12" class="leftShow">
              <span class="labelWidth">联系人姓名/联系方式：</span>
              <div class="information">
                <span>{{ enterpriseData.transactor || '--' }}</span
                >，
                <span>{{ enterpriseData.transactorTel || '--' }}</span>
              </div>
            </el-col>
            <el-col :span="12" class="leftShow">
              <span class="labelWidth">座机号码：</span>
              <span class="information">{{
                enterpriseData.landlineTel || '--'
              }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="pL">
            <el-col :span="12" class="leftShow">
              <span class="labelWidth">本地详细办公地址：</span>
              <span class="information">{{
                enterpriseData.officeAddress || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="leftShow">
              <span class="labelWidth">联系邮箱：</span>
              <span class="information">{{
                enterpriseData.email || '--'
              }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="pL">
            <el-col :span="12" class="leftShow" v-if="isShowencrypt">
              <span class="labelWidth">密保手机号：</span>
              <span class="information">{{ enterpriseData.tel || '--' }}</span>
            </el-col>
            <el-col :span="12" class="leftShow">
              <span class="labelWidth">单位类型：</span>
              <span class="information">{{ departmentTypeFun }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="pL">
            <!-- <el-col :span="12" class = "leftShow" v-if = "isShowencrypt">
                        <span class="labelWidth">账号用户名：</span>
                        <span class="information">{{enterpriseData.username || '--'}}</span>
                    </el-col> -->
            <!-- <el-col :span="12" class = "leftShow">
                        <span class="labelWidth">奖惩情况：</span>
                        <span class="information">
                            <el-link type="primary" v-if="rewardAndPunishInfo.length > 0" @click="toSee">查看</el-link>
                            <span v-else>--</span>
                        </span>
                    </el-col> -->
          </el-row>
          <el-row :gutter="20" class="pL">
            <el-col :span="12" class="leftShow" v-if="isShowencrypt">
              <span class="labelWidth">企业类型：</span>
              <span class="information">{{
                enterpriseData.companyType || '--'
              }}</span>
            </el-col>
            <el-col :span="12" class="leftShow">
              <span class="labelWidth">账号用户名：</span>
              <span class="information">{{
                enterpriseData.username || '--'
              }}</span>
            </el-col>
          </el-row>
          <template v-if="isYiLingUser()">
            <el-row :gutter="20" class="pL">
              <el-col :span="12" class="leftShow">
                <span class="labelWidth">劳资负责人姓名：</span>
                <span class="information">{{
                  enterpriseData.laborSupervisor || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="leftShow">
                <span class="labelWidth">劳资负责人电话：</span>
                <span class="information">{{
                  enterpriseData.laborSupervisorTel || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="pL">
              <el-col :span="12" class="leftShow">
                <span class="labelWidth">监管人员姓名：</span>
                <span class="information">{{
                  enterpriseData.supervisor || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="leftShow">
                <span class="labelWidth">监管人员电话：</span>
                <span class="information">{{
                  enterpriseData.supervisorTel || '--'
                }}</span>
              </el-col>
            </el-row>
          </template>
        </div>

        <div class="applyInfoBox">
          <el-row class="imgBoxs clearfix">
            <!-- <div class="itemBox">
                        <div class="imgBox licenseBox">
                            <el-image
                                style="width: 125.3px; height: 177px"
                                :src="licenseImg"
                                :preview-src-list="licenseList">
                            </el-image>
                        </div>
                        <span v-if="this.enterpriseData.departmentType=='0'">营业执照</span>
                        <span v-else>单位登记证书</span>
                    </div> -->
            <div class="applyInfoBox">
              <el-row class="imgBoxs clearfix">
                <div class="itemBox">
                  <div class="imgBox licenseBox">
                    <el-image
                      style="width: 125.3px; height: 177px"
                      :src="licenseImg"
                      :preview-src-list="licenseList"
                    >
                    </el-image>
                  </div>
                  <span v-if="this.enterpriseData.departmentType == '0'"
                    >营业执照</span
                  >
                  <span v-else>单位登记证书</span>
                </div>
                <div
                  class="itemBox"
                  v-if="this.enterpriseData.departmentType == '0'"
                >
                  <div class="imgBox idcardBox">
                    <el-image
                      style="width: 172.4px; height: 107px"
                      :src="idcardFront"
                      :preview-src-list="idcardList1"
                    >
                    </el-image>
                  </div>
                  <span>法人身份证正面</span>
                </div>
                <div
                  class="itemBox"
                  v-if="this.enterpriseData.departmentType == '0'"
                >
                  <div class="imgBox idcardBox">
                    <el-image
                      style="width: 172.4px; height: 107px"
                      :src="idcardBack"
                      :preview-src-list="idcardList2"
                    >
                    </el-image>
                  </div>
                  <span>法人身份证反面</span>
                </div>
              </el-row>
            </div>
          </el-row>
        </div>
      </div>
      <rewardAndPunishCom
        v-if="showRewardAndPunish"
        :rewardAndPunishInfo="rewardAndPunishInfo"
      ></rewardAndPunishCom>
    </div>
  </div>
</template>
<script>
//奖惩情况
import rewardAndPunishCom from '@/components/publicCom/rewardAndPunishCom'
export default {
  name: 'enterpriseDetail',
  components: {
    rewardAndPunishCom,
  },
  props: {
    path: {
      type: String,
      default: '',
    },
    ylcompanyId: {
      type: String,
      default: '',
    },
    ylcompanyName: {
      type: String,
      default: '',
    },
    uscc: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      updateLoading: false,
      titleText: '档案信息',
      enterpriseData: {},
      isShowNav: false,
      isShowTitle: false,
      isShowencrypt: false,
      isShowLogo: false,
      // srcList: [],
      // oldSrcList: [],
      companyId: '',
      back: false,
      isShowUpdate: '',
      licenseImg: '',
      idcardFront: '',
      idcardBack: '',
      licenseList: [],
      idcardList1: [],
      idcardList2: [],
      showRewardAndPunish: true,
      rewardAndPunishInfo: [],
    }
  },
  mounted() {},
  computed: {
    departmentTypeFun() {
      if (this.enterpriseData.departmentType == '0') {
        return '企业'
      } else if (this.enterpriseData.departmentType == '5') {
        return '事业单位'
      } else if (this.enterpriseData.departmentType == '10') {
        return '其他'
      }
    },
  },
  created() {
    //加载loading
    //this.openFullScreen();
    this.companyId = this.$route.query.companyId
    this.isYiLingUser() && (this.companyId = this.ylcompanyId)
    this.isShowTitle = true
    if (
      this.$route.query.routeName &&
      (this.$route.query.routeName == 'companyHome' ||
        this.$route.query.routeName == 'enterpriseArchives')
    ) {
      this.isShowNav = true
      this.isShowencrypt = false
      this.isShowLogo = true
      this.back = true
      // 首页跳转选中tab
      // this.$store.state.activeMenu ="/home/enterpriseSet/enterpriseDetail";
    } else if (this.$route.query.companyId) {
      this.back = true
      this.isShowNav = true
      this.isShowencrypt = true
      this.isShowLogo = true
      // 建设用工单位页面跳转，选中tab
      // this.$store.commit('set_active_index',"/home/enterpriseBasicInfo/infoMaintain");
      // this.$store.state.activeMenu ="/home/enterpriseBasicInfo/infoMaintain";
      // this.$store.commit("CHANGE_SLIDER_NAME", {oldUrl:"/home/enterpriseBasicInfo/infoMaintain",newUrl:this.$router.currentRoute.fullPath});
    }
    this.getEnterpriseInfo()
    // this.isShowUpdate = this.$store.state.buttonLimitsArr.indexOf('companyMaintain:update') > -1 || this.$store.state.buttonLimitsArr.indexOf('companyInfo:update') > -1 || this.$store.state.buttonLimitsArr.indexOf('mNcCompayList:update') > -1;
  },
  methods: {
    // 同步最新接口信息
    getApiInfo() {
      const CancelToken = axios.CancelToken
      let cancel
      let timer = setTimeout(() => {
        cancel()
        this.$message.error('连接超时，请检查网络！')
      }, 10000)
      return this.axios({
        method: 'post',
        url: 'api-c/company/expand/findCompanyInfo',
        data: {
          uscc: this.enterpriseData.uscc,
          companyName: this.ylcompanyName,
        },
        cancelToken: new CancelToken(function executor(c) {
          cancel = c
        }),
      })
        .then((response) => {
          this.updateLoading = false
          clearTimeout(timer)
          if (!response.data.hasError) {
            this.$message.success('数据同步成功！')
            this.getEnterpriseInfo()
          } else {
            this.$message.error('数据同步失败！')
          }
        })
        .catch((error) => {
          this.updateLoading = false
          clearTimeout(timer)
          if (error.response) {
            this.$message.error('数据同步失败！')
          }
        })
    },
    //开启loading
    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      return loading
    },
    closeFullScreen(loading) {
      loading.close()
    },
    getEnterpriseInfo() {
      this.axios({
        method: 'post',
        url: 'api-c/company/expand/companies',
        data: {
          id: this.companyId,
          areaId: this.$store.state.areaInfoArr.areaId,
        },
      })
        .then((res) => {
          this.enterpriseData = res.data.result
          this.getDetail(
            this.enterpriseData.projectName,
            this.enterpriseData.name,
            this.enterpriseData.uscc
          )
          var len = this.enterpriseData.fileExpandVOs.length
          if (len > 0) {
            this.licenseImg = this.enterpriseData.fileExpandVOs[0].absolutePath
            this.licenseList.push(
              this.enterpriseData.fileExpandVOs[0].absolutePath
            )
            this.idcardFront = this.enterpriseData.fileExpandVOs[1].absolutePath
            this.idcardList1.push(
              this.enterpriseData.fileExpandVOs[1].absolutePath
            )
            this.idcardBack = this.enterpriseData.fileExpandVOs[2].absolutePath
            this.idcardList2.push(
              this.enterpriseData.fileExpandVOs[2].absolutePath
            )
          }
          //请求成功关闭；
          //this.closeFullScreen(this.openFullScreen());
        })
        .catch((error) => {
          //请求成功关闭；
          //this.closeFullScreen(this.openFullScreen());
        })
    },
    goEdit() {
      var oldUrl
      if (this.companyId) {
        oldUrl = '/home/enterpriseBasicInfo/infoMaintain'
        let query = {
          companyId: this.companyId,
        }
        if (this.isYiLingUser()) {
          const { companyName } = this.$route.query
          Object.assign(query, { companyName, uscc: this.enterpriseData.uscc })
          oldUrl = '/home/enterpriseArchives/enterpriseList'
        }
        this.$router.push({
          path: '/home/enterpriseSet/jcEnterpriseInfo',
          name: 'jcEnterpriseInfo',
          query,
        })
      } else {
        oldUrl = '/home/enterpriseSet/enterpriseDetail'
        this.$router.push({
          path: '/home/enterpriseSet/enterpriseInfo',
          name: 'enterpriseInfo',
        })
      }
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    goBack() {
      if (this.path == 'settledEnterprise') {
        this.$router.push({
          path: '/home/businessManagement/enterpriseArchives/',
          name: 'enterpriseArchives',
          query: {
            companyId: this.companyId,
            name: 'settledEnterprise',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/businessManagement/settledEnterprise',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push({
          path: '/home/enterpriseBasicInfo/infoMaintain',
        })
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/enterpriseBasicInfo/infoMaintain',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    // toSee() {
    //     this.showRewardAndPunish = true;
    // },
    getDetail(projectName, name, uscc) {
      this.axios({
        method: 'post',
        url: 'api-r/reward/expand/findRewardForCompanyOrPerson',
        data: {
          projectName: projectName,
          companyName: name,
          uscc: uscc,
          type: 'COMPANY',
        },
      })
        .then((response) => {
          this.rewardAndPunishInfo = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
  },
}
</script>
<style scoped lang="less">
.container {
  .detailT {
    top: 55px;
    padding: 24px;
  }
  .editBut {
    position: absolute;
    top: 7px;
    right: 48px;
    height: 36px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    background: #009588;
    padding: 0 10px;
    cursor: pointer;
    &:hover {
      background-color: #009588;
      border-color: #009588;
      color: #fff;
      opacity: 0.8;
    }
  }
  .yleditBut {
    // right: 200px;
  }
  .ylBtn {
    position: absolute;
    top: 17px;
    right: 24px;
  }
  .enterpriseLogo {
    width: 80px;
  }
  .mainCon {
    top: 197px;
    min-width: 800px;
    background: none;
    padding: 0;
    .curT {
      background: #fff;
      padding: 24px;
      .logoStyle {
        margin-bottom: 24px;
      }
      .info {
        // background:#F5F7FB
        background: #f5f7fb;
        // margin-top: 24px;
        min-width: 800px;
        padding: 14px 8%;
      }
      .titleInfoBox {
        margin-left: 20px;
        margin-top: 22px;
        .titleInfo {
          display: inline-block;
          // width: 100px;
          background: #edeef9;
          text-align: center;
          height: 20px;
          font-size: 14px;
          color: #7e86d5;
          margin-right: 12px;
          padding: 0 20px;
        }
        .enterpriseName {
          font-size: 18px;
          margin-top: 8px;
        }
      }
    }
    .ylcurT {
      padding-top: 70px;
    }
  }
  .labelWidth {
    font-size: 14px;
    color: #666666;
    // display: inline-block;
    height: 36px;
    width: 200px;
    text-align: right;
    float: left;
  }
  .information {
    font-size: 14px;
    color: #151515;
    display: block;
    margin-left: 200px;
  }
  .picBox {
    // padding-left: 12.5%;
    margin-top: 24px;
    background: #f5f7fb;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
    // position: relative;
    padding: 15px 0;
    min-width: 800px;
    .pic {
      // width: 800px;
      // position: relative;
      // left: 50%;
      // transform: translateX(-50%);
      // -ms-transform: translateX(-50%);
      // -moz-transform: translateX(-50%);
      // -webkit-transform:translateX(-50%);
      // -o-transform:translateX(-50%);
      ul {
        display: inline-block;
        li {
          margin-left: 50px;
        }
      }
      ul li:first-child {
        margin-left: 0px;
        .imgStyle {
          width: 125.3px;
          height: 177px;
          margin-top: 11.5px;
        }
      }
      .picTipStyle {
        margin-top: 10px;
      }
    }
  }
  .leftShow {
    text-align: left;
    line-height: 36px;
  }
  .rightShow {
    text-align: right;
  }
  .centerShow {
    text-align: center;
  }
  .picStyle {
    width: 200px;
    height: 200px;
    .imgStyle {
      width: 172.4px;
      height: 107px;
      margin-top: 46.5px;
    }
  }
  .applyInfoBox {
    // margin-top:25px;
    .yellow {
      color: #f9a243;
    }
    .imgBoxs {
      padding: 24px;
      padding-bottom: 0;
      text-align: center;
      .itemBox {
        font-size: 14px;
        display: inline-block;
        margin-right: 54px;
        .imgBox {
          width: 200px;
          height: 200px;
          background: rgba(222, 229, 244, 0.3);
          margin-bottom: 10px;
          span {
            color: #333;
            font-size: 14px;
          }
        }

        .licenseBox {
          .el-image {
            margin-top: 11.5px;
          }
        }
        .idcardBox {
          .el-image {
            margin-top: 46.5px;
          }
        }
      }
      .itemBox:nth-child(3) {
        margin-right: 0px;
      }
    }
  }

  // .pL {
  // padding-left:13.5%;
  // }
}
</style>
